<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    template="/plantillas/plantilla-sistema.xhtml">
    <f:metadata>
        <f:event type="preRenderView" 
                 listener="#{animalBean.validarAcceso}"/>
    </f:metadata>
    <ui:define name="cabecera">
        <title>Gestión de Animales</title>
        <link rel="shortcut icon"  
              href="../../../resources/imagenes/favicon.ico" />
        <script src="http://maps.google.com/maps/api/js?sensor=true" 
        type="text/javascript"></script>
    </ui:define>
    <ui:define name="contenido">
      <center>
          <p:panel id="animalPnl" 
                   header="Listado de Animales" 
                   styleClass="contenido" >
               <h:form id="tablaAnimalFrm"> 
                  
                   <p:dataTable id="tablaAnimalDtb" 
                                var="animal"
                                value="#{animalBean.listaEntidades}" 
                                selection="#{animalBean.animalSeleccionado}"
                                rowKey="#{animal.codigoanimal}"
                                resizableColumns="true" 
                                paginator="true" 
                                paginatorPosition="bottom" 
                                rows="10" 
                                selectionMode="single"
                                emptyMessage="No hay registros disponibles."   >
                                  <p:ajax event="rowSelect" />  
                            <p:column filterBy="#{animal.especie.nombre}" 
                                      sortBy="#{animal.especie.nombre}"   
                                      headerText="Especie" 
                                      filterMatchMode="contains"
                                      styleClass="columna">
                                <h:outputText value="#{animal.especie.nombre}"  />
                            </p:column>
                            <p:column filterBy="#{animal.nombrecientifico}"  
                                      sortBy="#{animal.nombrecientifico}"  
                                      headerText="Nombre Cientifico" 
                                      filterMatchMode="contains"
                                      styleClass="columna">
                                <h:outputText value="#{animal.nombrecientifico}" />
                            </p:column>
                            <p:column filterBy="#{animal.nombrecomun}" 
                                      sortBy="##{animal.nombrecomun}"  
                                      headerText="Nombre Común" 
                                      filterMatchMode="contains"
                                      styleClass="columna">
                                <h:outputText value="#{animal.nombrecomun}"   />
                            </p:column>
                            <p:column filterBy="#{animal.rangodistribucion}" 
                                      sortBy="#{animal.rangodistribucion}"   
                                      headerText="Rango Distribución" 
                                      filterMatchMode="contains"
                                      styleClass="columna">
                                <p:tooltip  for="distribucion" value="#{animal.rangodistribucion}" />
                                <div class="texto-largo">
                                    <h:outputText id="distribucion" value="#{animal.rangodistribucion}"  />
                                </div>
                            </p:column>
                            <p:column filterBy="#{animal.referenciasbibliograficas}"  
                                      sortBy="#{animal.referenciasbibliograficas}"  
                                      headerText="Referencia Bibliografica" 
                                      filterMatchMode="contains"
                                      styleClass="columna">
                                <div class="texto-largo">
                                    <h:outputText value="#{animal.referenciasbibliograficas}" />
                                </div>
                            </p:column>
                           <p:column filterBy="#{animal.estado == 'true' ? 'Habilitado' : 
                                                 animal.estado == 'false' ? 'Deshabilitado' : animal.estado}"  
                                      sortBy="#{animal.estado == 'true' ? 'Habilitado' : 
                                                animal.estado == 'false' ? 'Deshabilitado' : animal.estado}"
                                      headerText="Estado" 
                                      filterMatchMode="contains"
                                      styleClass="columna">
                                      <h:outputText value="#{animal.estado == 'true' ? 'Habilitado' : animal.estado == 'false' ? 'Deshabilitado' : animal.estado}" />
                            </p:column>
                            <p:column headerText="Galeria" 
                                            styleClass="columna">
                                    <p:commandButton icon="ui-icon-image"
                                                actionListener="#{animalBean.setEntidad(animal)}"
                                                update=":fotoDlg"
                                                oncomplete="fotoWgt.show()"/>
                           </p:column>
                            <p:column headerText="Sinonimia" 
                                      styleClass="columna">
                                 <p:commandButton id="sinonimiaBtn" 
                                                  icon="ui-icon-search" type="button" />  
                                 <p:overlayPanel id="tablaSinonimiaOpn" 
                                                 for="sinonimiaBtn" 
                                                 appendToBody="true" 
                                                 showEvent="mouseup"
                                                 hideEvent="mouseup" 
                                                 hideEffect="fade" 
                                                 dynamic="true">  
                                     <p:dataTable id="tableSinonimiaDtb" 
                                                  var="sinonimia"  
                                                  value="#{animalBean.getSinonimias(animal)}" 
                                                  rowKey="" 
                                                  rows="10">  
                                        <p:column headerText="Animal"
                                                  styleClass="columna">  
                                            <h:outputText value="#{sinonimia.animal.codigoanimal}" />  
                                        </p:column>  
                                        <p:column headerText="Nombre Antiguo"
                                                  styleClass="columna">  
                                            <h:outputText  value="#{sinonimia.nombreantiguo}" />  
                                        </p:column>  
                                      </p:dataTable>  
                                  </p:overlayPanel>                                 
                            </p:column>
                            <p:column headerText="Reseña" 
                                      styleClass="columna"> 
                                    <p:commandButton id="resenyaBtn" 
                                                     title="Reseña" icon="ui-icon-search" 
                                                     actionListener="#{animalBean.prepararResenya(animal)}" 
                                                     update=":guardarResenaFrm:guardarResenaPnl" 
                                                     oncomplete="guardarResenaWgt.show()" />
                            </p:column>
                                  <p:column headerText="Ubicación"
                                            styleClass="columna">
                               <p:commandButton title="Ubicaciones del animal" 
                                                actionListener="#{animalBean.prepararMapa(animal)}"
                                                update=":mapaDlg"
                                                oncomplete="mapaWgt.show()"
                                                icon="ui-icon-search"
                                                style="font-size: 95%;"/>
                            </p:column>
                            <p:column headerText="Modificar"
                                      styleClass="columna"
                                      rendered="#{sesionBean.verificarPermiso('modificar','animal')}">
                                 <p:commandButton id="modificarBtn" 
                                                  icon="ui-icon-pencil"
                                                  title="Modificar" 
                                                  actionListener="#{animalBean.prepararModificacion(animal)}"
                                                  update=":guardarAnimalFrm:guardarAnimalWzd" 
                                                 oncomplete="guardarAnimalWgt.show()">
                                     <f:setPropertyActionListener target="#{animalBean.operacionActual}" 
                                                                  value="ACTUALIZACION" />
                                </p:commandButton>
                            </p:column>
                            <p:column  headerText="Eliminar" 
                                       styleClass="columna"
                                       rendered="#{sesionBean.verificarPermiso('eliminar','animal')}">
                                    <p:commandButton id="eliminarBtn" title="Eliminar" 
                                                  actionListener="#{animalBean.prepararEliminacion(animal)}"
                                                  icon="ui-icon-trash"
                                                  update="@form" 
                                                  oncomplete="confirmacionWgt.show()">
                                     <f:setPropertyActionListener target="#{animalBean.operacionActual}" 
                                                                  value="ELIMINACION" />
                                    </p:commandButton>
                            </p:column>
                            <f:facet name="footer">
                               <p:commandButton id="agregarBtn" 
                                                icon="ui-icon-document"
                                                value="Nuevo Animal"
                                                actionListener="#{animalBean.prepararAdicion}" 
                                                update=":guardarAnimalFrm:guardarAnimalWzd" 
                                                oncomplete="guardarAnimalWgt.show()" 
                                                style="float:left;"
                                                rendered="#{sesionBean.verificarPermiso('agregar','animal')}">
                                                <f:setPropertyActionListener target="#{animalBean.operacionActual}" 
                                                                              value="INSERCION" />
                               </p:commandButton>
                            </f:facet>
                       </p:dataTable>                        
                    </h:form>
                </p:panel>
            </center>
    </ui:define>  
    <ui:define name="extra">
        <!-- Diálogo de Inserccion/Modificacion de Animal -->
        <p:dialog id="guardarAnimalDlg" 
                  header="Gestión de Animal" 
                  widgetVar="guardarAnimalWgt" 
                  resizable="false"
                  closable="false"
                  draggable="false"
                  modal="true">
         <h:form id="guardarAnimalFrm">
             <p:messages id="mensajesMsg" globalOnly="true" />
           <p:wizard id="guardarAnimalWzd" 
                      nextLabel="Siguiente"
                      widgetVar="animalWgt" 
                      backLabel="Anterior"
                      flowListener="#{animalBean.procesarFlujoAdicion}"
                      showStepStatus="false">        
            <p:tab id="animalTab" title="Animal">  
               <p:panel id="animalPnl">                          
                  <h:panelGrid columns="3">  
                    <h:outputLabel for="codigoespecieTxt" value="Especie:" />
                    <p:selectOneMenu id="codigoespecieTxt" 
                                     value="#{animalBean.entidad.especie}" 
                                     required="true"
                                     filter="true"
                                     filterMatchMode="contains"
                                     rendered="#{animalBean.operacionActual == 'INSERCION'}">
                        <f:selectItem itemLabel="Seleccione..." itemValue="" />
                        <f:selectItems value="#{animalBean.itemsEspecie}" />
                        <f:converter converterId="especieConverter" />
                    </p:selectOneMenu>
                    <h:outputLabel for="codigoespecieTxt" 
                                   value="#{animalBean.entidad.especie.nombre}" 
                                   rendered="#{animalBean.operacionActual == 'ACTUALIZACION'}" />
                    <p:panel style="border:none; font-size: 85%">
                             <p:tooltip for="codigoespecieTxt" 
                                        showEvent="focus" 
                                        hideEvent="blur" 
                                        rendered="#{animalBean.tieneErrores('guardarAnimalFrm:codigoespecieTxt')}">
                             <p:message id="codigoespecieMsg" 
                                        for="codigoespecieTxt"
                                        display="text" />
                             </p:tooltip>
                   </p:panel>
                                      
                    <h:outputLabel for="nombrecientificoTxt" value="Nombre Cientifico:" />
                    <p:inputText id="nombrecientificoTxt" 
                                 value="#{animalBean.entidad.nombrecientifico}">
                                 <f:attribute name="regex" value="#{regex.textoobligatorio}" />
                                 <f:attribute name="formato" value="requerido" />
                                 <f:validator validatorId="regexValidator" />
                    </p:inputText>
                    <p:panel style="border:none; font-size: 85%">
                             <p:tooltip for="nombrecientificoTxt" 
                                        showEvent="focus" 
                                        hideEvent="blur" 
                                        rendered="#{animalBean.tieneErrores('guardarAnimalFrm:nombrecientificoTxt')}">
                             <p:message id="nombrecientificoMsg" 
                                        for="nombrecientificoTxt"
                                        display="text" />
                             </p:tooltip>
                   </p:panel>
                    
                    <h:outputLabel for="nombrecomunTxt" value="Nombre Comun:" />
                    <p:inputText id="nombrecomunTxt" 
                                 value="#{animalBean.entidad.nombrecomun}">
                                 <f:attribute name="regex" value="#{regex.textoobligatorio}" />
                                 <f:attribute name="formato" value="requerido" />
                                 <f:validator validatorId="regexValidator" />
                    </p:inputText>
                    <p:panel style="border:none; font-size: 85%">
                             <p:tooltip for="nombrecomunTxt" 
                                        showEvent="focus" 
                                        hideEvent="blur" 
                                        rendered="#{animalBean.tieneErrores('guardarAnimalFrm:nombrecomunTxt')}">
                             <p:message id="nombrecomunMsg" 
                                        for="nombrecomunTxt"
                                        display="text" />
                             </p:tooltip>
                   </p:panel>
                    
                    <h:outputLabel for="grupoSom" value="Grupo:" 
                                   style="width:160px; font-size: 100%"/>
                    <p:selectOneMenu id="grupoSom" 
                                     value="#{animalBean.entidad.grupo}" 
                                     
                                     required="true"
                                     filter="true"
                                     filterMatchMode="contains"
                                     rendered="#{animalBean.operacionActual == 'INSERCION'}">
                        <f:selectItem itemLabel="Seleccione..." itemValue="" />
                        <f:selectItems value="#{animalBean.itemsGrupos}" />
                        <f:converter converterId="grupoConverter" />
                    </p:selectOneMenu>
                    
                    <p:panel style="border:none; font-size: 85%">
                             <p:tooltip for="grupoSom" 
                                        showEvent="focus" 
                                        hideEvent="blur" 
                                        rendered="#{animalBean.tieneErrores('guardarAnimalFrm:grupoSom')}">
                             <p:message id="grupoMsg" 
                                        for="grupoSom"
                                        display="text" />
                             </p:tooltip>
                   </p:panel>
                    
                    <p:column>
                        <h:outputLabel for="rangodistribucionTxa" 
                                       value="Rango Distribucion:" />
                        <br/>
                        <h:outputText id="rangodistribucioncontador" 
                                      style="font-size: 80%"/>
                    </p:column>
                    <p:inputTextarea id="rangodistribucionTxa" 
                                     value="#{animalBean.entidad.rangodistribucion}"
                                     maxlength="1000"
                                     required="true"
                                     counter="rangodistribucioncontador"
                                     counterTemplate="Restan {0} caracteres."
                                     autoResize="false">
                    </p:inputTextarea>
                    <p:panel style="border:none; font-size: 85%">
                             <p:tooltip for="rangodistribucionTxa" 
                                        showEvent="focus" 
                                        hideEvent="blur" 
                                        rendered="#{animalBean.tieneErrores('guardarAnimalFrm:rangodistribucionTxa')}">
                             <p:message id="rangodistribucionMsg" 
                                        for="rangodistribucionTxa"
                                        display="text" />
                             </p:tooltip>
                   </p:panel>

                    
                    <p:column>
                                    <h:outputLabel for="referenciasbibliograficaTxa"
                                                   value="Referencias Bibliograficas:" />
                                    <br/>
                                    <h:outputText id="referenciasbibliograficacontador" 
                                                  style="font-size: 80%"/>
                    </p:column>
                    <p:inputTextarea id="referenciasbibliograficaTxa" 
                                     value="#{animalBean.entidad.referenciasbibliograficas}"
                                     required="true"
                                     maxlength="1000"
                                     counter="referenciasbibliograficacontador"
                                     counterTemplate="{0} Caracteres Restantes."
                                     autoResize="false">   
                    </p:inputTextarea>
                     <br/>
                    
                    <h:outputLabel for="estadoSom" value="Estado:" style="width:160px; font-size: 100%" 
                                   rendered="#{animalBean.operacionActual == 'ACTUALIZACION'}"/>
                    <p:selectOneMenu id="estadoSom" 
                                     value="#{animalBean.entidad.estado}" 
                                     required="true"
                                     rendered="#{animalBean.operacionActual == 'ACTUALIZACION'}">
                                     <f:selectItem itemLabel="Seleccione..." itemValue="" />
                                     <f:selectItem itemLabel="Activo" itemValue="Activo" />
                                     <f:selectItem itemLabel="Deshabilitado" itemValue="Deshabilitado" />
                                     <f:selectItem itemLabel="Revision" itemValue="Revision" />
                    </p:selectOneMenu>                    
                    <p:panel style="border:none; font-size: 85%"
                             rendered="#{animalBean.operacionActual == 'ACTUALIZACION'}">
                        <p:tooltip for="estadoSom" 
                                   showEvent="focus" 
                                   hideEvent="blur" 
                                   rendered="#{animalBean.tieneErrores('guardarAnimalFrm:estadoSom')}">
                            <p:message id="estadoMsg" 
                                       for="estadoSom"
                                       display="text" />
                        </p:tooltip>
                    </p:panel>
                       </h:panelGrid>  
                  </p:panel>
                
                
                
                </p:tab>  
               <p:tab>
                   <p:panelGrid style="border-color: transparent;">                       
                    
                    <p:row>
                        <p:column>
                    <h:outputLabel for="etiquetaTxt" value="Etiqueta:" />
                    </p:column>
                        <p:column>
                    <p:selectOneMenu id="etiquetaTxt"
                                     value="#{animalBean.etiqueta}"
                                     editable="true">
                            <f:selectItem itemValue="" itemLabel="Seleccione..." /> 
                            <f:selectItems value="#{animalBean.listaEtiquetas}" 
                                           var="etiqueta"
                                           itemLabel="#{etiqueta.nombre}"
                                           itemValue="#{etiqueta.nombre}"/>  
                    </p:selectOneMenu> 
                            </p:column>
                        <p:column>
                    <p:commandButton id="etiagregarBtn"
                                     icon="ui-icon-pencil"
                                     value="Agregar" 
                                     update="etiquetaDtb"
                                     actionListener="#{animalBean.agregarEtiqueta}"/>
                    </p:column>
                    </p:row>
                       
                    <p:row>
                        <p:column colspan="3">
                            <p:dataTable emptyMessage="No hay etiqueta vinculadas" id="etiquetaDtb" value="#{animalBean.etiquetasSeleccionadas}" var="etiqueta">  

                            <p:column headerText="Etiqueta">   
                                <center>
                                <h:outputText value="#{etiqueta}" />  
                                </center>
                            </p:column>   

                            <p:column headerText="Eliminar">  
                                <center>
                                 <p:commandButton id="etieliminarBtn"
                                                 icon="ui-icon-trash"
                                                 update="@form"
                                                 actionListener="#{animalBean.eliminarEtiqueta(etiqueta)}"/>
                                 </center>
                                    
                            </p:column>  

                        </p:dataTable>  
                        </p:column>
                     </p:row>
                    
                    </p:panelGrid>  
                   
                        
                   
               </p:tab>
            </p:wizard>  
             <br/>
              <p:separator  />
             <br/>
             <p:commandButton id="guardarBtn" actionListener="#{animalBean.guardarEntidad}" 
                                     oncomplete="if ( !args.validationFailed ){animalWgt.loadStep(animalWgt.cfg.steps[0],true); guardarAnimalWgt.hide()}" 
                                     update="@form, :tablaAnimalFrm:tablaAnimalDtb" 
                                     title="Guardar" 
                                     icon="ui-icon-disk" 
                                     style="float:right;"
                                     value="Guardar"/>
             <p:commandButton id="cancelarBtn"  
                                     actionListener="#{animalBean.revertirCambios}"
                                     onclick="guardarAnimalWgt.hide()" 
                                     value="Cancelar" 
                                     icon="ui-icon-cancel" 
                                     style="float:right;"
                                     title="Cancelar"/>
            </h:form>
        </p:dialog>
        <!-- Diálogo de confirmación de eliminación -->
        <p:confirmDialog id="confirmacionDlg" 
                         message="¿Está seguro que desea eliminar el registro?" 
                         header="Confirmación" 
                         widgetVar="confirmacionWgt" 
                         severity="alert"
                         width="300">  
            <h:form>
            <p:messages 
             id="mensajesMsg" 
             globalOnly="true" />
                    <p:commandButton value="Eliminar"
                                     actionListener="#{animalBean.eliminarEntidad}"
                                     update="@form,:tablaAnimalFrm:tablaAnimalDtb"
                                     oncomplete="if ( !args.validationFailed ) confirmacionWgt.hide()"
                                     icon="ui-icon-trash"
                                     style="float:right;"/>
                    <p:commandButton value="Cancelar"
                                     icon="ui-icon-cancel" 
                                     update="@form"
                                     oncomplete="confirmacionWgt.hide()" 
                                     style="float:right;">
                        <f:setPropertyActionListener target="#{animalBean.operacionActual}" 
                                                     value="NINGUNA" />
                    </p:commandButton>
                    </h:form>
        </p:confirmDialog>
        
        <!-- Diálogo de Reseña del Animal -->
        <p:dialog id="guardarResenaDlg" 
                  header="Reseña" 
                  widgetVar="guardarResenaWgt" 
                  resizable="false" 
                  modal="true" 
                  closable="false"
                  draggable="false"
                  width="750">
            <h:form id="guardarResenaFrm">
                
                <h:panelGrid id="guardarResenaPnl" 
                             columns="1" 
                             style="margin-bottom:10px">
                    <p:editor id="resenyaTxt"  
                              value="#{animalBean.resenya.contenidoactual}" 
                              width="700" />
                </h:panelGrid>
                 <p:separator  />
                 <br/>
                 <p:commandButton id="guardarBtn" 
                                             actionListener="#{animalBean.guardarResenya}" 
                                             oncomplete=":guardarResenaWgt.hide()" 
                                             update=":tablaAnimalFrm:tablaAnimalDtb" 
                                             title="Guardar"
                                             icon="ui-icon-disk"
                                             style="float:right;"
                                             value="Guardar"/>
                  <p:commandButton id="cancelarBtn"  
                                           type="button" 
                                           onclick="guardarResenaWgt.hide()" 
                                           value="Cancelar" 
                                           title="Cancelar"
                                           icon="ui-icon-cancel" 
                                           style="float:right;"/>
            </h:form>
        </p:dialog>   
        <p:dialog id="fotoDlg" header="Fotografía" 
                    closable="false"
                    dynamic="true"
                  widgetVar="fotoWgt" style="font-size: 95%"
                  modal="true">  
                        <p:galleria id="fotosGlr" var="imagen" 
                                    effectSpeed="1000"
                                    value="#{animalBean.entidad.fotos}">
                            <p:graphicImage  url="/fotos/#{imagen}" 
                                             width="480"
                                             height="360" />
                        </p:galleria> 
                        <p:commandButton value="Cerrar" 
                                         type="button" 
                                         onclick="fotoWgt.hide()"
                                         icon="ui-icon-close" 
                                         title="Cerrar ventana"
                                         immediate="true"
                                         style="float:right; font-size: 85%"/>
        </p:dialog>
                <p:dialog id="mapaDlg" 
                  header="Ubicación de Especímenes de
                  #{animalBean.entidad.nombrecientifico}" 
                  widgetVar="mapaWgt" 
                  resizable="false" 
                  modal="true"
                  draggable="false"
                  closable="false"
                  style="font-size: 95%">
            <p:gmap center="13.577012, -89.186539" 
                    zoom="8"  
                    type="HYBRID"
                    model="#{animalBean.mapa}"
                    style="width:640px; height:480px">
                <p:ajax event="overlaySelect" 
                        listener="#{animalBean.seleccionarMarcador}" /> 
                <p:gmapInfoWindow>
                    <p:outputPanel 
                        style="text-align:center;display:block;margin:auto:">
                        
                        <p:graphicImage height="100"
                                        value="/fotos/#{animalBean.especimenMarcador.foto}"/>
                            
                        <br/>
                        <h:outputText 
                            value="Especímen #{animalBean.especimenMarcador.animal.nombrecientifico}
                            recolectado en #{animalBean.marcador.title}" /> 
                        
                    </p:outputPanel>
                </p:gmapInfoWindow>
            </p:gmap>
            <p:commandButton 
                    value="Cerrar" 
                    type="button" 
                    onclick="mapaWgt.hide()"
                    icon="ui-icon-close" 
                    title="Cerrar ventana"
                    immediate="true"
                    style="float:right; font-size: 85%"/>
        </p:dialog>

    </ui:define>
</ui:composition>
